<template>
  <div>
    <el-form-item :prop="item.name || ''" :label="item.label" v-bind="item.formItemProps || {}" ref="el-form-item">
      <el-time-picker ref="input" v-model="mvalue" v-bind="opt"></el-time-picker>
    </el-form-item>
  </div>
</template>

<script>
  import { objectAssign, formatDate, objectAssignWithKeys } from "../../utils/common";
  import Required from "../validMixins/Required";

  export default {
    name: "PopoTimePicker",
    props: {
      value: { type: [String, Date] },
      item: { type: Object },
      formData: { type: Object },
    },
    mixins: [ Required],
    data() {
      return {
        mvalue: this.value,
        opt: {},
      };
    },
    watch: {
      mvalue(date) {
        // 如果不是要求返回Date，则返回格式化后的Date。
        // 格式化内容和 opt.dateFormat 一致
        // if( !this.item.useDate){
        //     console.log( "timepicker", date);
        //     date = formatDate( date, this.opt.valueFormat);
        // }

        this.$emit("input", date);
      },
    },
    created() {
      var _defaultPickerOptions = {
        format: "HH:mm:ss",
      };
      var opt = objectAssign(
        {
          isRange: !!this.item.isRange,
          valueFormat: this.item.valueFormat || "HH:mm:ss",
          arrowControl: !!this.item.arrowControl,
        },
        this.item.props
      );

      var pickerOptions = objectAssignWithKeys(
        "selectableRange,format",
        _defaultPickerOptions,
        this.item,
        opt.pickerOptions
      );
      opt.pickerOptions = pickerOptions;

      this.opt = opt;
    },
    methods: {},
  };
</script>

<style scoped lang="scss">
::v-deep {
  .el-date-editor {
    width: 100%;
  }
}
</style>

